<template>
    <view class="markdown-box" v-if="mobileApp">

        <MdPreview v-if="readOnly" :editorId="id" :modelValue="curValue" />
        <MdEditor v-else v-model="curValue" :toolbars="toolbars" :editorId="id"
                  :style="metadata.style" @onBlur="changeContent" />
    </view>
</template>

<script>
import MForm from "../js/MForm";
// #ifdef H5
// 控件地址:https://imzbf.github.io/md-editor-v3/en-US/index
import { MdEditor,MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
// #endif

export default {
    name: "MMark",
    // #ifdef H5
    components: {
        MdEditor,
        MdPreview
    },
    // #endif
    mixins:[MForm],
    data() {
        return {
            curValue:"",
            id : 'preview-only',
            toolbars:[
                'bold',
                'underline',
                'italic',
                'title',
                'strikeThrough',
                'unorderedList',
                'orderedList',
                'revoke',
                'next',
                'pageFullscreen',
                'preview'
            ],
            mobileApp:false,
        }
    },
    created(){
        // #ifdef H5
        this.mobileApp = true
        // #endif
    },
    methods: {
        changeContent(){
            this.updateValue(this.curValue);
        }
    },
    watch: {
        value:{
            handler(val){
                this.curValue = val ;
            },
            immediate:true
        }
    }
}
</script>

<style >
.markdown-box .md-editor-resize-operate,
.markdown-box ::v-deep(.md-editor-resize-operate){
    background-color: #f4f4f4!important;
}
.markdown-box .v-md-textarea-editor {
    background-color: red;
}
.markdown-box .v-md-textarea-editor textarea{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    resize: none;
}
</style>
